{% load static %}
{#<script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.7/layui.js"></script>#}
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.min.js"></script>
<link type="text/css" href="https://www.layuicdn.com/layui-v2.5.7/css/layui.css" rel="stylesheet">
<script src="{% static 'layui-v2.5.7/layui/layui_exts/xm-select.js' %}"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>



<style>
    .item{
        margin-bottom: 20px;
    }
</style>
<div style="margin: 10px 10px 10px 10px">
    <ul class="layui-timeline">
          <div class="layui-row">
              <div class="layui-col-xs7 layui-col-sm7 layui-col-md7">
                  <li class="layui-timeline-item">
                      <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">选择授权站点并前往亚马逊填写开发者信息</h3>
                            <p>
                                1. 点击设置->用户权限

                            </p>
                             <p>
                                2. 选择第三方开发人员和应用程序
                                 <br/>
                                 <img src="/static/authorization/step1.png" style="width: 80%; height: 100px"/>
                            </p>
                             <p>
                                 3. 选择为新开发者授权
                                 <br/>
                                 <img src="/static/authorization/step2.png" style="width: 80%; height: 100px"/>
                             </p>
                            <p>
                                 4. 填写开发者名称和ID
                                <br/>
                                 <img src="/static/authorization/step3.png" style="width: 80%; height: 100px"/>
                             </p>

                        </div>
                  </li>
              </div>
              <div class=" layui-col-xs5 layui-col-sm5 layui-col-md5" style="margin-top: 10%">
                  <div class="layui-row item">
                      <div><span class="layui-badge layui-bg-blue" style="border-radius: 100%; margin-right: 10px">1</span>选择授权站点</div>
                      <div id="select_site" class="toobar_item" style="width: 50%;margin-left: 30px"></div>
                  </div>
                  <div class="layui-row item">
                      <div><span class="layui-badge layui-bg-blue" style="border-radius: 100%; margin-right: 10px">2</span>开发者名称(Developer's Name)</div>
                      <div><input type="text" id="developerName"  value="{{ developerinfo.developerName }}" readonly class="layui-input" style="width:50%; border-radius: 50px; margin-left: 30px; float: left" >
                           <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" style="float: left; margin-left: 10px" onclick="copy_content('developerName')">复制</button>

                      </div>
                  </div>

                  <div class="layui-row item">
                      <div><span class="layui-badge layui-bg-blue" style="border-radius: 100%; margin-right: 10px">3</span>开发者ID(Developer ID)</div>
                      <div><input type="text" id="developerid"  value="{{ developerinfo.developerId }}" readonly class="layui-input" style="width:50%; border-radius: 50px; margin-left: 30px; float: left" >
                           <button type="button" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal" style="float: left; margin-left: 10px" onclick="copy_content('developerid')">复制</button>
                      </div>
                  </div>
              </div>
          </div>
          <div class="layui-row">
              <div class="layui-col-xs7 layui-col-sm7 layui-col-md7">
                  <li class="layui-timeline-item">
                      <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">同意授权</h3>
                            <p>
                                <img src="/static/authorization/step4.png" style="width: 80%; height: 100px"/>
                            </p>
                        </div>
                  </li>
                  <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                      <h3 class="layui-timeline-title">填写SellerID和MWS Auth Token</h3>
                        <p>
                            <img src="/static/authorization/step5.png" style="width: 80%; height: 100px"/>
                         </p>
                    </div>
                  </li>
              </div>
              <div class=" layui-col-xs5 layui-col-sm5 layui-col-md5">
                   <div class="layui-row item">
                          <div><span class="layui-badge layui-bg-blue" style="border-radius: 100%; margin-right: 10px">4</span>卖家编号(SellerID)</div>
                          <div><input type="text" id="sellerid"  placeholder="示例:A4LPW5TJDOI7EW"  class="layui-input" style="width:80%; border-radius: 50px; margin-left: 30px; float: left" autocomplete="off">
                          </div>
                      </div>
                    <div class="layui-row item">
                          <div><span class="layui-badge layui-bg-blue" style="border-radius: 100%; margin-right: 10px">5</span>授权令牌(MWS Auth Token)</div>
                          <div><input type="text" id="auth_token"  placeholder="示例:amzn.mws.53b89732-7cdg-52kl-54kj-oblj52dsfk"  class="layui-input" style="width:80%; border-radius: 50px; margin-left: 30px; float: left" autocomplete="off">
                          </div>
                      </div>
                   <div class="layui-row item">
                          <div><span class="layui-badge layui-bg-blue" style="border-radius: 100%; margin-right: 10px">6</span>店铺名称</div>
                          <div><input type="text" id="shop_name"  placeholder="在本网站内的名称"  class="layui-input" style="width:80%; border-radius: 50px; margin-left: 30px; float: left" autocomplete="off">
                          </div>
                   </div>
                    <div class="layui-row item" style="text-align: center">
                        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" onclick="sure_authorization()">确认授权</button>
                    </div>
            </div >
          </div>

        </ul>


</div>
<script>
    // 渲染站点下拉选择框插件
    xmSelect.render({
        // 这里绑定css选择器
        el: '#select_site',
        tips: '选择站点',
        radio: true,
        clickClose: true,
        // 渲染的数据
        style: {
        borderRadius: '50px',
    },
        toolbar: {
        show: true,
        list: ['CLEAR']
    },
        {#paging: true, //分页#}
        {#pageSize: 5, //每页最大数目#}
        filterable: true,
        filterMethod: function(val, item, index, prop){
            if(val == item.value){//把value相同的搜索出来
            return true;
            }
            if(item.name.indexOf(val) != -1){//名称中包含的搜索出来
            return true;
            }
        return false;
        },

        // 显示样式
        template({ item, sels, name, value }){
            return item.name  + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>'
        },
        prop: {
            name: 'name',
        },
        data: [
            {name: '北美站', children: [
                {name: '美国', value: 'US'},
                {name: '加拿大', value: 'CA'},
                {name: '墨西哥', value: 'MX'},
            ]},
            {name: '欧洲站', children: [
                {name: '英国', value: "UK"},
                {name: '德国', value: "DE"},
                {name: '法国', value: "FR"},
                {name: '意大利', value: "IT"},
                {name: '西班牙', value: "ES"},
                {name: '印度', value: "IN"},
                {name: '阿联酋', value: "AE"},
                {name: '沙特阿拉伯', value: "SA"},
                ]},
            {name: '日本站', children: [
                {name: '日本', value: 'JP'},
            ]},
            {name: '澳洲站', children: [
                {name: '澳大利亚', value: 'AU'},
            ]},
        ],
    });


    layui.use(['layer'], function(){
        var layer = layui.layer;
    });
    {#点击复制内容#}
    function copy_content(id_name) {
        var input = document.getElementById(id_name);
        input.select();
        document.execCommand("copy");
        layer.msg('复制成功', {time:1000});

    }

    function sure_authorization() {
        var site = xmSelect.get('#select_site', true).getValue('valueStr').replace(/\s/g, "");
        var sellerid = $("#sellerid").val().replace(/\s/g, "");
        var auth_token = $("#auth_token").val().replace(/\s/g, "");
        var shop_name = $("#shop_name").val();
        if (!site){
            layer.msg('请选择站点！',{time: 1000, icon:2})
        }else if (!sellerid){
            layer.msg('请填写SellerID！',{time: 1000, icon:2})
        }else if (!auth_token){
            layer.msg('请填写MWS Auth Token！',{time: 1000, icon:2})
        }else if (!shop_name){
            layer.msg('请填写店铺名称！',{time: 1000, icon:2})
        }else{
            $.ajax({
                {#url: "/pages/sure_authorization/",#}
                url: "{% url 'pages:sure_authorization' %}",
                type: "POST",
                dataType: "json",
                data: {site: site, sellerid: sellerid, auth_token: auth_token, shop_name: shop_name },
                //async: false,
                success: function (result) {
                    if (result.code == '1') {
                        layer.msg('添加成功!', {time: 800}, function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        });
                    }
                    else {
                        layer.msg('授权失败', {icon:2, time:1500});
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                     alert('错误信息：' + XMLHttpRequest.responseText); //获取的信息即是异常中的Message
                }
             });
        }

    }

</script>